<template>
  <div class="chart1Head-open">
    <div class="chart1-nav flex-v-center" :style="dateStyle">
      <span v-for="(item, i) in chart1_nav_list" :key="i" :class="{'cns-active': i==cns_active}" @click="cnsHandle(i)">{{item}}</span>
      <el-popover
        placement="bottom"
        width="350"
        v-model="moreVisible"
        trigger="click">
        <div slot="reference"><div style="padding: 3px 7px;" :class="{'cns-active': cns_active>99}">{{moreTxt}}<i class="el-icon-caret-bottom"></i></div></div>
        <div class="more-date flex-h-sb">
          <div class="md-chunk">
            <div class="md-tit">区间</div>
            <div class="md" :class="{'md-active': i+100==cns_active}" v-for="(item, i) in more_chart1_nav_list1" :key="item" @click="cnsHandle(i+100, item)">{{item}}</div>
          </div>
          <div class="md-chunk">
            <div class="md-tit">年度</div>
            <div class="md" :class="{'md-active': i+1000==cns_active}" v-for="(item, i) in yearList" :key="item" @click="cnsHandle(i+1000, item)">{{item}}</div>
          </div>
        </div>
      </el-popover>
    </div>
    <el-date-picker
      style="width: 280px;margin-left: 14px;"
      v-model="dates"
      type="daterange"
      align="right"
      unlink-panels
      size="small"
      @change="pickerChange"
      :clearable="false"
      value-format="yyyy-MM-dd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
</template>

<script>
import { parseTime, deepClone } from '@/utils'
import { subMonths } from 'date-fns'

export default {
  props: {
    dateStyle: {
      type: String,
      default: ''
    },
    more_chart1_nav_list2: {
      type: Array,
      default: () => {
        return []
      }
    },
    chartDate: {
      type: Array,
      default: () => {
        return []
      }
    },
    chartDate_cb: {
      type: Array,
      default: () => {
        return []
      }
    },
    oldDate: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  watch: {
    chartDate_cb: {
      handler(dates) {
        this.dates = deepClone(dates)
      },
      deep: true,
      immediate: true
    },
    chartDate: {
      handler(dates) {
        this.dates = deepClone(dates)
      },
      deep: true,
      immediate: true
    },
    more_chart1_nav_list2: {
      handler(val) {
        this.yearList = [];
        for (let i = val.length; i >= 0; i--) {
          this.yearList.push(val[i]);
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      chart1_nav_list: ['成立以来', '同区间', '近一月', '近三月', '近半年', '近一年', '近两年', '今年以来'],
      cns_active: 0,
      more_chart1_nav_list1: ['近三年', '近五年'],
      moreVisible: false,
      moreTxt: '更多',
      yearList: [],
      dates: []
    }
  },
  methods: {
    pickerChange(date) {
      this.cns_active = null
      this.$emit('sameSection', false) 
      this.$emit('update:chartDate', date)
    },
    cnsHandle(i, txt) {
      if(this.cns_active == i) {
        return
      }
      this.cns_active = i
      this.moreVisible = false
      txt ? this.moreTxt = txt : this.moreTxt = '更多'
      switch (i) {
        case 0:
          this.dates = deepClone(this.oldDate)
          break
        case 1:
          this.dates = deepClone(this.oldDate)
          break
        case 2:
          this.dates = [parseTime(subMonths(this.oldDate[1], 1)), this.oldDate[1]]
          break
        case 3:
          this.dates = [parseTime(subMonths(this.oldDate[1], 3)), this.oldDate[1]]
          break
        case 4:
          this.dates = [parseTime(subMonths(this.oldDate[1], 6)), this.oldDate[1]]
          break
        case 5:
          this.dates = [parseTime(subMonths(this.oldDate[1], 12)), this.oldDate[1]]
          break
        case 6:
          this.dates = [parseTime(subMonths(this.oldDate[1], 24)), this.oldDate[1]]
          break
        case 7:
          this.dates = [((new Date(this.oldDate[1]).getFullYear()-1)+'-12-31'), this.oldDate[1]]
          break
        case 100:
          this.dates = [parseTime(subMonths(this.oldDate[1], 36)), this.oldDate[1]]
          break
        case 101:
          this.dates = [parseTime(subMonths(this.oldDate[1], 60)), this.oldDate[1]]
          break
        default:
          if(txt&&i>999) {
            this.dates = [(txt.slice(0, 4)-1)+'-12-31', (Number(txt.slice(0, 4)))+'-12-31']
          }
        break
      }
      const sameSection_res = i==1
      this.$emit('sameSection', sameSection_res) 
      this.$emit('update:chartDate', this.dates)
    },
  }
}
</script>

<style lang="scss" scoped>
.chart1Head-open {
  // position: absolute;
  // width: 860px;
  // left: 50%;
  // margin-left: -645px;
  // top: 517px;
  // z-index: 10;

  display: flex;
  .chart1-nav {
    position: absolute;
    width: 860px;
    left: 50%;
    margin-left: -550px;
    top: 515px;
    z-index: 10;
    span {
      padding: 4.5px 7px;
      cursor: pointer;
      & + span { margin-left: 10px; }
    }
    .cns-active {
      color: #e1322d;
      background-color: #fcf5f5;
    }
  }
}
</style>

